<script setup>
import axios from 'axios';
import PermissionsAdd from '@/components/app/PermissionsAdd.vue';
import { onMounted, reactive, ref,watchEffect } from 'vue';
import { showMsg,showDialog } from '@/components/Util';
import Page from '@/views/Page.vue';
let optype = ref('new')
let list = ref([]);
let title=ref('添加权限');
let list2 = ref([]);
let student =ref({
    id:'',
    permission:'',
    remark:'',
    type:'',
    page:1,
    pageSize:0
})
function getData(p=1){
    axios.get('/api/permission_list/'+p).then(res=>{
        console.log(res.data);
    if(res.data.status==200){
        list.value = res.data.data.list;
        student.value.pageSize = res.data.data.page;
        }else{
            showMsg('获取信息失败','error',2000)
        }
    })
}

function newPermission(){
    addshow.value=false;
    getData();
}
function del(id){
    showDialog({msg:'确认删除'}).then(res=>{
    axios.delete('/api/permission_delete/'+id).then(res=>{
        if(res.data.status==200){
            getData();
        }else{
            showMsg(res.data.msg,'error',2000);
        }
    })
})
}
function edit(id){
    //显示表单窗口
    //显示数据到窗口
   addshow.value = true;
   //list [{},{}]
   let obj = list.value.filter(item=>item.id==id);
   console.log(obj);
   permission.value = obj[0];
   optype.value = 'edit';
   title.value="修改权限"

}
let permission = ref({permitName:'',type:'',remark:'',dengji:''})

let addshow=ref(false);
onMounted(()=>{
    getData();
})
function news(){
    addshow.value=true;
    title.value='添加菜单';
}
watchEffect(()=>{
    getData(student.value.page);
})
</script>
<template >
    <PermissionsAdd :title="title" :list2="list" :type="optype" :permission="permission" v-show="addshow" @submit="newPermission" @close="addshow=false" ></PermissionsAdd>
    <div class="page">
        <div class="tool">
            <button @click="news">添加</button>
        </div>
        <ul class="list">
            <div class="list1">
                <span>权限名称</span>
                <span>权限描述</span>
                <span>权限类型</span>
                <span>权限等级</span>
                <span>按钮</span>
            </div>
            <li class="item" v-for="item in list" :key="item.id">
                <span>{{ item.permitName }}</span>
                <span>{{ item.remark }}</span>
                <span>{{ item.type }}</span>
                <span>{{ item.dengji }}</span>
                <span>
                    <button @click="del(item.id)">删除</button>
                    <button @click="edit(item.id)">修改</button>
                </span>
            </li>
        </ul>
    </div>
    <div class="qq">
    <Page v-model:total="student.pageSize" v-model:current="student.page"></Page>
</div>
</template>
<style scoped>
.list{
    margin-bottom: 20px;
    padding: 0;
    box-sizing: border-box;
    height: 200px;
}
.list1{
    /* width: 893px; */
    height: 50px;
    background-color:rgb(255, 80, 0) ;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    list-style: none;
}
.list1>span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.list>li{
    display: grid;
    grid-template-columns:repeat(5,1fr);
}
.item>span{
    height: 50px;
    display: flex;
    justify-content: center;
    /* text-align: center; */
    padding-top: 30px;
}
.item button{
    width: 50px;
    height: 25px;
}
span{
    border: #049b82 1px solid;
}
.it{
    display: flex;
}
.qq{
    width: 300px;
    height: 300px;
    margin-top:200px;
}
</style>